<template>
	<view class="gl-container-page glBackgroup" style="display: flex;flex-direction: column;"
		:style="[hasTheme(level?.level)]">
		<view class="gl-title" style="gap: 10px;display: flex;flex-direction: column;padding: 20px 25px;">
			<view class="" style="font-size: x-large;">尊敬的用户</view>
			<view class="">欢迎来到{{sConf.title}}会员权益中心</view>
		</view>

		<view style="padding: 20px 25px;">
			<view class="gl-card-border tb-shadow">
				<view class="gl-name-card" style="padding: 15px 25px;display: flex;flex-direction: column;gap: 20px;">
					<view class="" style="display: flex;gap: 10px;">
						<tn-avatar :url="sConf.pics + staff?.face" size="xl"></tn-avatar>
						<view class="">
							<view class="gl-name-name" style="display: flex;align-items: center;gap: 10px;">
								<text style="font-size: large;">{{staff?.nicename}}</text>
								<tn-icon :name="sConf.pics + level?.icon" size="52" offset-top="2"
									style="padding: 2px;border-radius: 50% 50%;background-color: #00000066;width: 56rpx;height: 56rpx;"></tn-icon>
							</view>
							<view class="gl-name-title" style="font-size: x-small;">{{zipPhone(staff?.phone)}} </view>
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: column;gap: 10px;">
						<view class="" style="display: flex;justify-content: space-between;">
							<view class="gl-name-name" style="display: flex;align-items: center;gap: 5px;">
								<tn-icon :name="sConf.pics + level?.icon" size="32" offset-top="2"
									style="padding: 2px;border-radius: 50% 50%;background-color: #00000066;width: 36rpx;height: 36rpx;"></tn-icon>
								<text>{{staff?.curLevel.name}}</text>
							</view>
							<view v-if="staff?.curLevel.level < level?.level" class="gl-name-title">暂未开通{{level?.name}}
							</view>
						</view>
						<tn-line-progress :percent="calePlan()" :duration="1000" inactive-color="#888"
							height="10"></tn-line-progress>
					</view>
				</view>
			</view>
		</view>

		<view class="gl-card-card" style="position: relative;">
			<image v-if="Boolean(level)" :src="sConf.pics + '/media/icon/card_'+level?.level+'.png'" mode="widthFix"
				style="width: 100%;" />
			<view class="" style="position: absolute;right: 0;bottom: 0;padding: 45px;">
				<button v-if="staff?.curLevel.level < level?.level" class="gl-card-action"
					hover-class="gl-card-action-hover" @click="actionEvent"> 立即激活</button>
				<button v-else class="gl-card-action" hover-class="gl-card-action-hover"> 已激活</button>
			</view>
		</view>

		<view class="gl-card-buy" style="padding: 20px 25px;">
			<view v-if="staff?.curLevel.level >= level?.level" class="gl-card-buy-card"><text>尊贵的{{level?.name}}</text>
			</view>
			<view v-else class="gl-card-buy-card"><text>
					{{level?.name}}{{zipPrice(level?.money / 100)}}元</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sConf: getApp().globalData,
				themes: [{
					level: 2,
					theme: {
						'--primary-color': '#6a85a8',
						'--secondary-color': '#c7d6e9',
						'--text-bg': '#2D4052ff',
						'--text-dark': '#2D4052aa',
						'--text-light': '#2D405288'
					}
				}, {
					level: 3,
					theme: {
						'--primary-color': '#E1B38F',
						'--secondary-color': '#F9DBB9',
						'--text-bg': '#663333ff',
						'--text-dark': '#663333aa',
						'--text-light': '#66333388'
					}
				}, {
					level: 4,
					theme: {
						'--primary-color': '#F9B24A',
						'--secondary-color': '#FFE1A5',
						'--text-bg': '#D16500ff',
						'--text-dark': '#D16500aa',
						'--text-light': '#D1650088'
					}
				}, {
					level: 5,
					theme: {
						'--primary-color': '#1E171A',
						'--secondary-color': '#856741',
						'--text-bg': '#D9B78Bff',
						'--text-dark': '#D9B78Baa',
						'--text-light': '#D9B78B88'
					}
				}, {
					level: 6,
					theme: {}
				}, {
					level: 7,
					theme: {}
				}, {
					level: 8,
					theme: {}
				}, {
					level: 9,
					theme: {}
				}, {
					level: 1,
					theme: {}
				}]
			}
		},
		props: {
			level: {
				type: Object,
				default: null
			},
			staff: {
				type: Object,
				default: null
			}
		},
		methods: {
			zipPhone(e) {
				if (!e) {
					return null
				}
				return e.slice(0, 3) + '****' + e.slice(-5, -1)
			},
			zipPrice(e) {
				if (!e) {
					return 0
				}
				return Math.ceil(e)
			},
			hasTheme(e) {
				return this.themes.find(item => item.level === e).theme
			},
			/**
			 * 计算进度条
			 */
			calePlan() {
				if (this.staff?.curLevel.level === this.level?.level) {
					return Math.ceil(this.staff?.exper.amount / this.staff?.nextLevel.steam * 100)
				} else if (this.staff?.curLevel.level < this.level?.level) {
					return 0
				} else if (this.staff?.curLevel.level > this.level?.level) {
					return 100
				}
			},
			actionEvent() {
				console.log('actionEvent', this.level.level);
				this.$emit('upLevel', this.level.level)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$gl-primary-color: var(--primary-color);
	$gl-secondary-color: var(--secondary-color);
	$gl-text-bg: var(--text-bg);
	$gl-text-dark: var(--text-dark);
	$gl-text-light: var(--text-light);

	.gl-container-page {
		width: 100%;
		height: 100vh;
	}

	.gl-card-action-hover {
		color: rgba(255, 255, 255, 0.6);
		background-color: #179b16;
		border-color: #179b16;
	}

	.glBackgroup {
		background: repeating-linear-gradient(125deg, $gl-primary-color, $gl-secondary-color 25%, $gl-primary-color 40%);

		.gl-title {
			color: $gl-text-dark;
		}

		.gl-name-card {
			color: $gl-text-dark;
			border-radius: 15px;

			position: relative;
			border: 2px solid transparent;
			background: linear-gradient(to right, $gl-primary-color, $gl-secondary-color, $gl-primary-color);
			background-clip: padding-box border-box;

			.gl-name-name {
				color: $gl-text-bg;
			}

			.gl-name-title {
				color: $gl-text-light;
			}
		}

		.gl-card-card {
			color: $gl-text-dark;

			.gl-card-action {
				color: $gl-text-dark;
				font-size: small;
				background: linear-gradient(to right, $gl-secondary-color, $gl-primary-color);
				background-clip: padding-box border-box;
				padding: 0 25px;
				box-shadow: 1px 1px 40px 5px rgba(0, 0, 0, 0.2);
			}
		}

		.gl-card-buy {
			color: $gl-text-bg;

			.gl-card-buy-card {
				color: $gl-text-bg;
				font-size: xx-large;
				font-weight: bold;
				padding: 13px 0;
				background-color: transparent;
				border: 1px solid $gl-text-bg;
				border-radius: 35px 35px;
				display: flex;
				justify-content: center;
				box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.5);
			}
		}

	}

	.gl-card-border {
		padding: 3px;
		border-radius: 15px;
		animation: deg 6s linear infinite;
		background: conic-gradient(from var(--a), #ffffff 0%, #ffffff88 5%, transparent 5%, transparent 80%, #ffffff 85%);
	}

	@property --a {
		syntax: '<angle>';
		initial-value: 0deg;
		inherits: true;
	}

	@keyframes deg {
		0% {
			--a: 0deg;
		}

		100% {
			--a: 360deg
		}
	}
</style>